<template>
  <section class="echartBox-wrapper avLineEchart-wrapper">
    <span style="color: #fff">
      <!-- {{ echartsData }} -->
    </span>
    <div class="header-box">
      <div
        class="title-box"
        :style="{
          textAlign: title.direction ? title.direction : 'center',
          paddingLeft: title.direction ? '20px' : '0',
        }"
      >
        <span class="title-header">{{ title.heading }}</span>
        <span v-if="title.secondary">{{ title.secondary }}</span>
      </div>
      <div class="control-box">
        <a-select
          default-value="lucy"
          style="width: 120px"
          @change="handleChange"
        >
          <a-select-option value="jack"> Jack </a-select-option>
        </a-select>
        <!-- 下拉框 -->
        <!-- 选择 -->
        <ul class="list-box">
          <li
            class="list-item"
            v-for="(item, index) in list"
            :key="index"
            :value="item.key"
            :class="{ active: index === tabActive }"
            @click="changeTab(index)"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
    </div>

    <div class="echart-box" :ref="id"></div>
  </section>
</template>
<script>
// import * as Echarts from "echarts";
// import "../echarts/index"
// let echarts = require("echarts/lib/echarts");
import echarts from "../echarts/index";
export default {
  props: ["id", "title", "echartsData"],
  data() {
    return {
      chart: null,
      list: [
        { key: 0, label: "电压" },
        { key: 1, label: "内阻" },
        { key: 2, label: "温度" },
      ],
      tabActive: 0,
      // echartsData: {
      // dataUnit: null,
      // axisData: [
      //   "通调信息机房",
      //   "中心机房",
      //   "监控机房",
      //   "成都机房",
      //   "财务部机房",
      //   "licy测试机房",
      // ],
      // seriesData: [
      //   { type: "紧急", data: ["3", "6", "10", "15", "18", "24"] },
      //   { type: "严重", data: ["1", "4", "6", "7", "10", "15"] },
      //   { type: "一般", data: ["4", "7", "8", "12", "16", "22"] },
      //   { type: "预警", data: ["2", "5", "6.7", "9", "12", "18"] },
      // ],
      // },
    };
  },
  watch: {
    // 监听echartsData变化
    echartsData: {
      handler(newVal) {
        if (newVal) {
          this.initData(this.echartsData.seriesData);
          this.$nextTick(() => {
            this.renderEchart();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    changeTab(index) {
      this.tabActive = index;
    },
    handleChange() {},

    initData(seriesData) {
      if (seriesData) {
        return seriesData.map((item) => {
          return {
            name: item.name,
            data: item.data,
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(92, 173,225)",
                },
                {
                  offset: 1,
                  color: "rgb(40,219,202)",
                },
              ]),
            },
          };
        });
      }
    },
    renderEchart() {
      //2.初始化
      const linechart = echarts.init(this.$refs[this.id]);
      //3.配置数据
      let option = {
        // title: {
        //   text: this.title,
        //   x: "center",
        //   y: "10",
        //   textStyle: {
        //     color: "#48A3F9",
        //   },
        // },

        tooltip: {
          //鼠标悬浮时设置
          trigger: "axis",
          backgroundColor: "rgba(25,62,119,0.4)",
          borderColor: "#4372B9",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data:
            this.echartsData.seriesData &&
            this.echartsData.seriesData.map((item) => item.name),
          right: 10,
          top: 0,
          itemWidth: 10,
          itemHeight: 4,
          itemGap: 4,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          left: "2%",
          right: "8%",
          bottom: "9%",
          top: 30,
          containLabel: true,
        },
        color: ["#40BBCE"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.echartsData.axisData,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4F73A",
              type: "solid",
            },
          },
          axisLabel: {
            // x轴的文字设置
            interval: 0,
            textStyle: {
              color: "#fff",
            },
          },

          splitLine: {
            show: false, //想要不显示网格线，改为false
            lineStyle: {
              color: ["#20355D"],
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4F73A5",
              type: "solid",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true, //想要不显示网格线，改为false
            lineStyle: {
              color: ["#20355D"],
            },
          },
        },
        series: this.initData(this.echartsData.seriesData),
        // series: [
        //   {
        //     name: "预警",
        //     type: "line",
        //     smooth: true,
        //     showSymbol: false,
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //     // lineStyle: {
        //     //   color: "#2E89E2",
        //     // },
        //   },
        //   {
        //     name: "一般",
        //     type: "line",
        //     smooth: true,
        //     showSymbol: false,
        //     data: [220, 182, 191, 234, 290, 330, 310],
        //     // lineStyle: {
        //     //   color: "#2E90BD",
        //     // },
        //   },
        //   {
        //     name: "严重",
        //     type: "line",
        //     smooth: true,
        //     showSymbol: false,
        //     data: [150, 232, 201, 154, 190, 330, 410],
        //     // lineStyle: {
        //     //   color: "#D09151",
        //     // },
        //   },
        //   {
        //     name: "紧急",
        //     type: "line",
        //     smooth: true,
        //     showSymbol: false,
        //     data: [320, 332, 301, 334, 390, 330, 320],
        //     // lineStyle: {
        //     //   color: "#DB4A4C",
        //     // },
        //   },
        // ],
      };
      // 4.传入数据
      linechart.setOption(option);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        linechart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          linechart.resize();
        });
      });
    },
  },
};
</script>
<style lang="scss">
$titleHeight: 20px;
$titleMargin: 6px;
.echartBox-wrapper.avLineEchart-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .header-box {
    display: flex;
    .title-box {
      min-width: 30px;
      border-left: 3px solid #25b8ff;
      height: $titleHeight;
      line-height: $titleHeight;
      margin: $titleMargin 0 $titleMargin 10px;
      font-size: 16px;
      font-weight: bold;
      color: #25b8ff;
      .title-header {
        padding-left: 10px;
      }
    }
    .control-box {
      margin-left: auto;
      display: flex;
      .ant-select {
        color: #fff;
        .ant-select-selection {
          background-color: transparent;
          border:1px solid #287EBF;
          .ant-select-arrow{
            color:#287EBF;
          }
        }
      }

      .list-box {
        display: flex;
        margin-left: 10px;
        .list-item {
          padding: 6px 14px;
          border: 1px solid #226fab;
          cursor: pointer;
          border-left: 0;
          &:first-child {
            border-radius: 20px 0 0 20px;
            border-left: 1px solid #226fab;
          }
          &:last-child {
            border-radius: 0 20px 20px 0;
          }
          &.active {
            background: #2e90d4;
          }
        }
      }
    }
  }

  .echart-box {
    height: calc(100% - #{$titleHeight} - 2 * #{$titleMargin});
    width: 100%;
  }
}
</style>
